<template>
	<view class="clip-contain">
		<view class="status_bar"></view>
		<image :src="url" mode="aspectFit"></image>
		<l-clipper 
		v-if="show" 
		:width='600'
		:height="600"
		:is-lock-width='true'
		:is-lock-height="true"
		:image-url="src" 
		:max-ratio='3'
		:is-show-photo-btn='false'	
		@success="clipSuccess" 
		@cancel="clipCancel"
		:is-limit-move="true"/>
	</view>
</template>

<script>
	import lClipper from '@/components/lime-clipper/index'
	export default{
		components: {lClipper},
		data(){
			return{
				show: false,
				url: '',
				src:""
			}
		},
		onLoad(options) {
			this.src = options.src;
			this.show = true;
		},
		methods:{
			getUserInfo(){
				return new Promise((resolve,reject)=>{
					this.$store.dispatch('get_userInfo').then((res)=>{
						resolve(res)
					}).catch((err)=>{
						reject(err)
					})
				})
			},
			// 裁剪完成
			clipSuccess(e){
				const that = this;
				uni.showLoading({
					title:'正在上传头像',
					mask:true
				})
				uni.uploadFile({
					url:that.$store.state.baseUrl + '/appData'+ that.$api.uploadAdvanter,
					filePath:e.url,
					fileType:"image",
					name:"file",
					header:{
						token:that.$store.state.token,
					},
					success:async function(res){
						try{
							const resData = JSON.parse(res.data);
							if(resData.data.code == 200){
								try{
									const userInfo = await that.getUserInfo();
									uni.hideLoading();
									uni.navigateBack({
										delta: 2
									})
								}catch(err){
									
								}
							}else{
								uni.showToast({
									title:"服务器内部异常,头像上传失败",
									icon:"none"
								})
							}
						}catch(e){
							uni.showToast({
								title:"服务器内部异常,Json.parse fail",
								icon:"none"
							})
						}
					},
					fail(err){
					}
				})
			},
			clipCancel(){
				this.show = false;
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.clip-contain{
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #000;
	}
</style>
